<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<title>LDSS</title>
	<link rel="stylesheet" type="text/css" href="asset/css/reset.css">
	<link rel="stylesheet" type="text/css" href="asset/css/font-awesome-4.4.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="asset/css/animate.css">
	<link rel="stylesheet" type="text/css" href="asset/css/common.css">
	<link rel="stylesheet" type="text/css" href="asset/css/report.css">
	<link rel="stylesheet" type="text/css" href="asset/plugin/wangEditor/css/wangEditor-1.3.12.css">
	<link rel="stylesheet" type="text/css" href="asset/plugin/highlight/hljs.min.css">
	<style>
        #canvas{
          width: 100%;
          margin: 0 auto;
          position: relative;
          height: 1050px;
        }
        h1{
          text-align: center;
          color: #333333;
          line-height: 2em;
          font-size: 18px;
        }
        #dataclass{
          /**position: absolute;
          top: 65px;
          left: 15px;
          z-index: 999;
          width: 240px;**/
          background-color: #eeeeee;
          opacity: 1;
          overflow: hidden;
        }
        #dataclass ul{
          list-style: none;
          padding: 10px;
        }
        #dataclass ul li{
          line-height: 1.5em;
          font-size: 14px;
          padding-left: 15px;
          cursor: pointer;
          color: #000000;
        }
        #dataclass ul li:hover{
          color: #8B12A1;
          background-color: #ffffff;
        }
        #dataclass ul li.active{
          background-color: #91BC1F;
          color: #ffffff;
        }
        h2{
          font-size: 18px;
          line-height: 1.5em;
          color: #ffffff;
          background-color: #00BBF2;
          padding-left: 10px;
        }
        h2 .chevron{
          float: right;
          line-height: 1.5em;
          padding-right: 5px;
          cursor: pointer;
        }
        #chartMap{
          width: 800px;
          height: 600px;
          margin: 0 0;
        }
        .chartbox{
          position: absolute;
          top: 65px;
          right: 15px;
          width: 320px;
          opacity: 0.85;
          overflow: hidden;
        }
        #piechartBox{
          overflow: hidden;
          background-color: #ffffff;
          margin-top: 4px;
        }
        #piechartBox h2{
          background-color: #7FB02F;
        }
        #barchartBox{
          overflow: hidden;
          background-color: #ffffff;
          top: 320px;
          margin-top: 4px;
        }
        #barchartBox h2{
          background-color: #AFA032;
        }
        #chartPie{
          height: 280px;
          width: 280px;
          margin:auto;
          background-color: #eeeeee;
        }
        #chartBar{
          height: 380px;
          width: 340px;
          margin-left:-10px;
          background-color: #eeeeee;
        }
        .tooltipitem{
          line-height: 1.5em;
          font-family: normal;
          font-size: 12px;
          background-color: #77BBDC;
          opacity: 0.85;
          padding-left: 15px;
        }
        .tooltipitem span{
          width: 70px;
          display: inline-block;
        }
        .tooltipitem span:first-child{
          width: 100px;
        }
        h3.tooltipitem{
          color:#eeeeee;
          background-color: #0D77B6;
          font-size: 14px;
          opacity: 0.75;
        }
        h1 span{
          display: inline-block;
          padding:5px;
          border-radius: 5px;
          line-height: 30px;
          margin: 10px;
          cursor: pointer;
        }
        h1 span.active{
          color:red;
          background-color: #ffffff;
        }
        ul li a{
            line-height: 1.2em;
            color: #333333;
        }
    </style>
</head>
<body>
<div class="header clearfix">
	<div class="fl">
		<i class="logo fl" title="领导辅助决策支持系统"></i>
		<h1 class="fl">领导辅助决策支持系统</h1>
	</div>
	<div id="navbox" class="fr">
		<ul class="nav-warper">
			<li class="menu"><a href="main.html"><i class="jjjc"></i>经济检测</a></li>
			<li class="menu"><a href="reports.html"><i class="tjzb"></i>统计专报</a></li>
			<li class="menu active"><a href="map.html"><i class="qysj"></i>区域数据</a></li>
			<!-- <li class="menu"><a href="javascript:;"><i class="qyhz"></i>区域汇总</a></li>
			<li class="menu"><a href="javascript:;"><i class="qydb"></i>区域对比</a></li> -->
			<li class="menu"><a href="search.html"><i class="zhcx"></i>综合查询</a></li>
		</ul>
		<div class="baseline">
			<i id="navpoint" class="point"></i>
		</div>
	</div>
</div>
<div class="toolbar clearfix">
	<div class="bread fl"><i class="icon"></i>统计专报 &rarr; 阅读</div>
	<div class="search fr"><span class="input"><input></span><span class="button"><i class="fa fa-search"></i>搜索</span></div>
</div>
<div class="container">
	<div class="mainview clearfix">
		<div id="canvas">
  <h1><i class="icon-bar-chart"></i> 2015年6月主要经济指标 [ <span class="areaid" onclick="setJsMap();">江苏</span> - <span class="areaid active" onclick="setNtMap();">南通</span> - <span class="areaid" onclick="setRgMap();">县区</span> ]</h1>
    
    <div id="chartMap"></div>
    <div class="chartbox">
      <div id="dataclass">
    <h2><i class="icon-tasks"></i> 指标类型 <i class="chevron fa fa-chevron-up"></i></h2>
    <ul></ul>
    </div>
      <div id="barchartBox">
        <h2><i class="icon-align-left"></i> 指标排位 <i class="chevron fa fa-chevron-up"></i></h2>
        <div id="chartBar"></div>
      </div>

      <div id="piechartBox">
        <h2><i class="icon-circle"></i> 指标占比 <i class="chevron fa fa-chevron-up"></i></h2>
        <div id="chartPie"></div>
      </div>
    </div>
  </div>
	</div>
</div>
	<footer>
		版权所有：南通市统计局 技术支持：江苏中威科技软件系统有限公司
	</footer>
</body>
<script src="data/datajson2.js"></script>
<script src="data/datajson32.js"></script>
<script src="data/datajson323.js"></script>
<script type="text/javascript" src="asset/js/echarts.all.js"></script>
<script type="text/javascript" src="asset/js/require.js"></script>
<script type="text/javascript">
	require(['jquery','plugin/nav','plugin/themetw'],
	function($,_nav,themetw){
		'use strict';
		var nav=new _nav('#navbox','#navpoint');
		nav.run();
		window.themetw=themetw;
		window.$=$;

		function addAnimateByTime(target,cls,time){
			setTimeout(function(){
				addAnimate(target,cls,null);
			},time);
		}
		function addAnimate(target,cls,callback){
			$(target).removeClass('disvisible').addClass('animated '+cls).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
					$(this).removeClass('animated '+cls);
					if(typeof callback=='function'){
						callback();
					}
				});
		}

		var series = datajson;
	  var classid=0;
	  var __maptype="nt";
	  function init(){
	    var lis=[];
	    for(var k in series){
	      lis.push('<li classid="'+k+'" class="'+(k==classid?'active':'')+'"><i class="icon-circle-blank"></i> '+series[k].name+'</li>');
	    }
	    $('#dataclass').find('ul').eq(0).html(lis.join(''));
	  }
	  $('#dataclass').on('click','li',function(){
	      $('#dataclass').find('li').removeClass('active');
	      $(this).addClass('active');
	      classid=$(this).attr('classid');
	      setECharts(classid);
	    });

	    $('#dataclass').on('click','.chevron',function(){
	      if($(this).hasClass('fa-chevron-up')==true){
	        $('#dataclass').height('1.5em');
	        $(this).addClass('fa-chevron-down').removeClass('fa-chevron-up');
	      }else{
	        $('#dataclass').height('auto');
	        $(this).addClass('fa-chevron-up').removeClass('fa-chevron-down');
	      }
	    });

	    $('#piechartBox').on('click','.chevron',function(){
	      if($(this).hasClass('fa-chevron-up')==true){
	        $('#piechartBox').height('1.5em');
	        $(this).addClass('fa-chevron-down').removeClass('fa-chevron-up');
	      }else{
	        $('#piechartBox').height('auto');
	        $(this).addClass('fa-chevron-up').removeClass('fa-chevron-down');
	      }
	    });

	    $('#barchartBox').on('click','.chevron',function(){
	      if($(this).hasClass('fa-chevron-up')==true){
	        $('#barchartBox').height('1.5em');
	        $(this).addClass('fa-chevron-down').removeClass('fa-chevron-up');
	      }else{
	        $('#barchartBox').height('auto');
	        $(this).addClass('fa-chevron-up').removeClass('fa-chevron-down');
	      }
	    });
	  /**
	   * [getBarOption 获取bar的option]
	   * @param  {[type]} title      [标题]
	   * @param  {[type]} legend     [图例]
	   * @param  {[type]} data     [数据]
	   * @return {[type]}            [option]
	   */
	  function getBarOption(title,legend,data,total){
	    var option = {
	      title: {
	          show:!title?false:true
	          ,text: title
	          ,x: 'center'
	          ,textStyle:{
	              fontSize:14,
	              fontWeight:'normal'
	          }
	      }
	      ,grid:{
	          borderWidth:1
	      }
	      ,toolbox: {
	          show:false
	          ,feature:{
	            dataView:{
	              show:true
	            }
	            ,saveAsImage:{
	              show:true
	            }
	          }
	      }
	      ,tooltip: {
	          show:true
	          ,type:'line'
	          ,trigger: 'axis'
	          ,axisPointer: {
	              lineStyle: {
	                  width: 1
	              }
	          }
	      }
	      ,calculable : false
	      ,legend: {
	          show: false
	          ,data: legend
	      }
	      ,yAxis : [
	          {
	              type: 'category',
	              axisLine : {
	                  show: true
	                  ,lineStyle:{
	                      width:1
	                  }
	              }
	              ,axisTick:{
	                  show:false
	                  ,length:2
	              }
	              ,splitLine:{
	                  show: false
	              }
	              ,splitArea : {show : false}
	              ,data: legend
	          },
	          {
	              type: 'category',
	              axisLine : {
	                  show: true
	                  ,lineStyle:{
	                      width:0
	                      ,color:'rgba(0,87,174,0.1)'
	                  }
	              }
	              ,axisTick:{
	                  show:false
	                  ,length:1
	              }
	              ,splitLine:{
	                  show: false
	              }
	              ,splitArea : {show : false}
	              ,data: data
	          }
	      ],
	      xAxis : [
	          {
	              type : 'value',
	              //name : '增幅',
	              axisLabel : {
	                  formatter: ' '
	              }
	              ,axisLine : {
	                  show: true
	                  ,lineStyle:{
	                      width:1
	                  }
	              }
	              ,splitLine:{
	                  show: false
	              }
	              ,splitArea : {show : true}
	              ,max:data[data.length-1].value*1.5
	          }
	      ],
	      series : [
	          {
	              name:'总量'
	              ,type:'bar'
	              ,barWidth: 5
	              ,itemStyle: {
	                normal: {
	                  color:'rgba(0,87,174,1)' //rgba(89,179,222,0.8)
	                  ,barBorderRadius:0
	                  ,barBorderWidth:0
	                  ,label : {
	                      show: true
	                      ,formatter:function(params,ticket,callback){
	                          return (params.value/total*100).toFixed(2)+'%';
	                      }
	                      ,textStyle:{color:'rgba(0,87,174,1)'}
	                  }
	                }
	                ,emphasis:{
	                  color:'rgba(0,138,205,1)'
	                  ,barBorderRadius:0
	                  ,barBorderWidth:0
	                }
	              }
	              ,data: data
	          }
	      ]
	    };
	    return option
	  }
	  /**
	   * [getPieOption 获取饼图的option]
	   * @param  {[type]} title      [标题]
	   * @param  {[type]} legend     [图例]
	   * @param  {[type]} data       [数据]
	   * @return {[type]}            [option]
	   */
	  function getPieOption(title,legend,data){
	    var colors=[
	          //0,138,205
	          //89,179,222
	          'rgba(0,138,205,0.95)'
	          ,'rgba(0,138,205,0.90)'
	          ,'rgba(0,138,205,0.85)'
	          ,'rgba(0,138,205,0.80)'
	          ,'rgba(0,138,205,0.75)'
	          ,'rgba(0,138,205,0.70)'
	          ,'rgba(0,138,205,0.65)'
	          ,'rgba(0,138,205,0.60)'
	          ,'rgba(0,138,205,0.55)'
	          ,'rgba(0,138,205,0.50)'
	          ,'rgba(0,138,205,0.45)'
	          ,'rgba(0,138,205,0.40)'
	          ,'rgba(0,138,205,0.35)'
	          ,'rgba(0,138,205,0.30)'
	        ];
	    if(title.length>8){
	      title=title.substr(0,5)+'\n'+title.substr(5)
	    }
	    var option = {
	        title: {
	            show:!title?false:true
	            ,text: title
	            ,x: 'center'
	            ,y: 'center'
	            ,textStyle:{
	                fontSize:14,
	                fontWeight:'normal'
	            }
	        }
	        ,color:colors.reverse()
	        ,toolbox: {
	            show:false
	            ,feature:{
	              dataView:{
	                show:true
	              }
	              ,saveAsImage:{
	                show:true
	              }
	            }
	        }
	        ,tooltip: {
	            show:true
	            ,type:'line'
	            ,trigger: 'axis'
	            ,axisPointer: {
	                lineStyle: {
	                    width: 1
	                }
	            }
	        }
	        ,legend: {
	            show: false
	            ,data: legend
	        }
	        ,series: [{
	            name:'总量'
	            ,type:'pie'
	            ,radius : ['30%', '50%']
	            ,center: ['50%', '50%']
	            ,data: data
	            ,itemStyle:{
	              normal:{
	                label:{
	                  show:true
	                  ,formatter:'{b}\n{c}'
	                  ,textStyle:{
	                    color:'rgba(89,179,222,1)'
	                  }
	                }
	                ,labelLine:{
	                  show:true
	                  ,length:10
	                }
	              }
	            }
	        }]
	    };
	    return option
	  }
	  function setECharts(key){
	    var seriesItem=series[key];
	    var echartTotalLegend = [];
	    var echartTitle = seriesItem.name;
	    var echartTotalData = [];
	    var TotalDataCount=0;
	    var seriesDataItem = seriesItem.data;

	    for(var i = 1; i < seriesDataItem.length; i++){
	        echartTotalData.push({
	            value: seriesDataItem[i].total, 
	            name: seriesDataItem[i].area
	        })
	        TotalDataCount+=seriesDataItem[i].total;
	    }
	    //数据排序
	    echartTotalData.sort(function(a,b){
	        return a.value-b.value;
	    });
	    for(var k in echartTotalData){
	      echartTotalLegend.push(echartTotalData[k].name);
	    }


	    // 基于准备好的dom，初始化echarts图表
	    var chartPie = ec.init(document.getElementById('chartPie'), themetw);
	    var chartBar = ec.init(document.getElementById('chartBar'), themetw);

		console.log(JSON.stringify(echartTotalData));
	    var pieoption=getPieOption(echartTitle,echartTotalLegend,echartTotalData);
	    var baroption=getBarOption(echartTitle,echartTotalLegend,echartTotalData,TotalDataCount);

	    chartPie.setOption(pieoption);
	    chartBar.setOption(baroption);
	  }
	  var cachedata={};
	  //获取自身数据
	  function getSelfData(name){
	    if(cachedata[name]) return cachedata[name];
	    var data=[];
	    for(var i in series){
	      var k=series[i];
	      var d=k.data;
	      for(ii in d){
	        var v=d[ii];
	        if(v.area==name){
	          var s='<h3 class="tooltipitem">'+k.name+'</h3>'
	          +'<div class="tooltipitem"><span>总量: '+v.total+k.suffix+'</span>, <span>总量排名: '+v.totalrank
	                +'</span>;<span>增幅: '+v.growth+'%</span>, <span>增幅排名: '+v.growthrank
	                +'</span></div>';
	          data.push(s);
	        }
	      }
	    }
	    var hh='',__i=0;
	    if(__maptype=='js'){
	      hh='<h3>排名范围：全省</h3>';
	      __i=0;
	    }else if(__maptype=='nt'){
	      hh='<h3>排名范围：全市</h3>';
	      __i=1;
	    }else{
	      hh='<h3>排名范围：全县（区）</h3>';
	      __i=2;
	    }
	    $('.areaid').removeClass('active').eq(__i).addClass('active');


	    cachedata[name]=hh+data.join('');

	    return cachedata[name];
	  }
	  window.ec=echarts;
	  window.mapCityGeoData=ec.util.mapData.params;
	  var zrEvent = zrender.tool.event;
	  setNtMap();
	  init();
	  setECharts(classid);

	  function setJsMap(){
	  	$('.areaid').removeClass('active').eq(0).addClass('active');
	    series=datajson2;
	    init();
	    setECharts(0);
	    __maptype="js";
	    // 南通320600
	    var city="江苏";
	    //itemStyle
	    var itemStyle = {
	      normal:{label:{
	        show:true,
	        formatter:'{a}',
	        textStyle: {fontSize: 12,fontWeight : 'normal'}
	      }},
	      emphasis:{label:{show:true}}
	    };
	    var option = {
	      tooltip:{
	        z:99,
	        show:true,
	        showDelay:500,
	        position:function(xy){
	          //console.log(xy);
	        },
	        formatter:function(o){
	          return getSelfData(o.name);
	        }
	      },
	      series : [
	        {
	          name: '地图数据',
	          type: 'map',
	          mapType: city,
	          selectedMode : 'single',

	          itemStyle2:{
	              normal:{label:{show:true}},
	              emphasis:{label:{show:true}}
	          },
	          itemStyle: itemStyle,
	          data:[
	              {name: '崇川区',value: Math.round(Math.random()*1000)}
	            ]
	        }
	      ]
	    };
	    var myChart = ec.init(document.getElementById('chartMap'),themetw);
	    myChart.setOption(option);

	    //点击地图响应事件
	    myChart.on(ec.config.EVENT.MAP_SELECTED, function (param){
	      // 全国选择时指定到选中的省份
	      var selected = param.selected;
	      for (var i in selected) {
	        if (selected[i]==true) {
	          if(i=='南通市') setNtMap();
	        }
	      }
	    });
	  }
	  window.setJsMap=setJsMap;

	  function setNtMap(){
	  	$('.areaid').removeClass('active').eq(1).addClass('active');
	    series=datajson;
	    init();
	    setECharts(0);
	    __maptype="nt";
	    // 南通320600
	    var city="nantong",cityid=320600;
	    // 自定义扩展图表类型
	    mapCityGeoData.params[city] = {
	      getGeoJson: (function (c) {
	        var geoJsonName = c;
	        return function (callback) {
	          callback(ntgeojson);
	        }
	      })(cityid)
	    };
	    //itemStyle
	    var itemStyle = {
	      normal:{label:{
	        show:true,
	        formatter:'{a}',
	        textStyle: {fontSize: 12,fontWeight : 'normal'}
	      }},
	      emphasis:{label:{show:true}}
	    };
	    var option = {
	      tooltip:{
	        z:99,
	        show:true,
	        showDelay:500,
	        position:function(xy){
	          //console.log(xy);
	        },
	        formatter:function(o){
	          return getSelfData(o.name);
	        }
	      },
	      series : [
	        {
	          name: '地图数据',
	          type: 'map',
	          mapType: city,
	          selectedMode : 'single',

	          itemStyle2:{
	              normal:{label:{show:true}},
	              emphasis:{label:{show:true}}
	          },
	          itemStyle: itemStyle,
	          data:[
	              {name: '崇川区',value: Math.round(Math.random()*1000)}
	            ]
	        }
	      ]
	    };
	    var myChart = ec.init(document.getElementById('chartMap'),themetw);
	    myChart.setOption(option);

	    //点击地图响应事件
	    myChart.on(ec.config.EVENT.MAP_SELECTED, function (param){
	      // 全国选择时指定到选中的省份
	      var selected = param.selected;
	      for (var i in selected) {
	        if (selected[i]==true) {
	          if(i=='如皋市') setRgMap();
	        }
	      }
	    });
	  }
	  window.setNtMap=setNtMap;

	  function setRgMap(){
	  	$('.areaid').removeClass('active').eq(2).addClass('active');
	    series=datajson3;
	    init();
	    setECharts(0);
	    __maptype="rg";
	    // 如皋320682
	    var city="rugao",cityid=320682;
	    // 自定义扩展图表类型
	    mapCityGeoData.params[city] = {
	      getGeoJson: (function (c) {
	        var geoJsonName = c;
	        return function (callback) {
	          callback(rggeojson);
	        }
	      })(cityid)
	    };
	    //itemStyle
	    var itemStyle = {
	      normal:{label:{
	        show:true,
	        formatter:'{a}',
	        textStyle: {fontSize: 12,fontWeight : 'normal'}
	      }},
	      emphasis:{label:{show:true}}
	    };
	    var option = {
	      tooltip:{
	        z:99,
	        show:true,
	        showDelay:500,
	        position:function(xy){
	          //console.log(xy);
	        },
	        formatter:function(o){
	          return getSelfData(o.name);
	        }
	      },
	      series : [
	        {
	          name: '地图数据',
	          type: 'map',
	          mapType: city,
	          selectedMode : 'single',

	          itemStyle2:{
	              normal:{label:{show:true}},
	              emphasis:{label:{show:true}}
	          },
	          itemStyle: itemStyle,
	          data:[
	              {name: '崇川区',value: Math.round(Math.random()*1000)}
	            ]
	        }
	      ]
	    };
	    var myChart = ec.init(document.getElementById('chartMap'),themetw);
	    myChart.setOption(option);
	  }
	  window.setRgMap=setRgMap;

	  $('.areaid').on('click',function(){
	    $('.areaid').removeClass('active');
	    $(this).addClass('active');
	  });
	});
</script>
</html>